<template>
  <view class="home">
    首页
    <!-- 自定义组件 -->
    <navbar></navbar>
    <tab :list="tabList" :tabIndex="tabIndex" @tab="tab"></tab>
    <view class="home-list-swiper">
      <list-swiper
        :tabList="tabList"
        :swiperIndex="swiperIndex"
        @change="change"
      ></list-swiper>
    </view>
  </view>
</template>

<script>
//easyCom cmponents/组件名/组件名.vue
export default {
  data() {
    return {
      tabList: [],
      tabIndex: 0,
      swiperIndex: 0,
    };
  },
  onLoad() {
    uni.$on("labelChange", (res) => {
      this.tabList = [];
      this.tabIndex = 0;
      this.swiperIndex = 0;
      this.getLabel();
    });
    this.getLabel();
  },
  methods: {
    tab({ data, index }) {
      console.log(data, index);
      this.swiperIndex = index;
    },
    getLabel() {
      this.$api
        .get_label({
          name: "get_label",
        })
        .then((res) => {
          const { data } = res;
          data.unshift({
            name: "全部",
          });
          this.tabList = data;
        });
    },
    change(current) {
      this.tabIndex = current;
      this.swiperIndex = current;
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
}

.home {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;

  .home-list-swiper {
    height: 100%;
  }
}
</style>
